<template>
    <div>
        <h1 style="text-align: center;">权限列表</h1>
        <el-button type="primary" 
        v-permission="{path: '/auth/add', name: '权限添加'}"
        @click="$router.push('/auth/add')">新增权限</el-button>
        <el-table
            :data="authlist"
            style="width: 100%;margin-bottom: 20px;"
            row-key="_id"
            border
        >
            <el-table-column
                prop="name"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="path"
                label="路径"
                width="180">
            </el-table-column>
            <el-table-column
                prop="icon"
                label="图标"
                width="180">
            </el-table-column>
            <el-table-column
            label="是否展示">
                <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.isShow"
                    @change="change(scope.row._id)"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                v-permission="{path: '/auth/edit', name: '权限修改'}"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                v-permission="{path:'/auth/del', name:'权限删除'}"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 编辑 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="权限路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="权限图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                        v-model="form.isShow"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="父权限">
                <el-select v-model="form.parentId" placeholder="请选择角色">
                    <el-option v-for="role in authlist" :key="role._id" :label="role.name" :value="role._id"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { authList, authEdit, authDelete, authStatus } from '@/request'
import permission from '@/utils/permission'
export default {
    directives:{
        permission
    },
    data () {
        return {
            authlist:[],
            form: {
                name: '',
                icon: '',
                path: '',
                isShow: false,
                parentId: '0'
            },
            dialogVisible:false
        }
    },
    methods: {
        async change(id) {
            let data = await authStatus(id)
            let { error_code,msg } = data
            if(error_code === 200){
                this.$message({
                    message: msg,
                    type: 'success',              
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                });
            }
        },
        handleEdit(index, row) {
            // console.log(index, row);
            this.dialogVisible = true
            this.form = row
        },
        async handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm('你真的要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    authDelete(row).then(data =>{
                        let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,    
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.GetAuthList()
                    }) 
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '停止删除'
                });          
            });
            
        },
        async GetAuthList() {
            let data = await authList()
            this.authlist = data.data.authlist
            // console.log(this.authlist);
        },
        // 发送修改请求
        async onSubmit() {
            let data =  await authEdit(this.form)
            // console.log(data);
            let { error_code,msg } = data
            if(error_code === 200) {
                // 给弹窗  清空表单数据 让表单隐藏 重新发请求 渲染用户列表
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.dialogVisible = false
                        this.form = {
                            name: '',
                            icon: '',
                            path: '',
                            isShow: false,
                            parentId: '0'
                        }
                        this.GetAuthList()
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }
        },
    },
    created (){
        this.GetAuthList()
    }
}
</script>

<style>
    
</style>
